import React from'react';
import './TabsRow.css';
import { useState } from 'react';
import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';

function TabsRow() {
  const tabs = [
    { path: '/tb1', name: 'Contract Management' },
    { path: '/tb2', name: 'Estimation management' },
    { path: '/tb3', name: 'Order management' },
  ];
  const [key, setKey] = useState({tab: tabs[0].path});
  return (
    <Tabs
      id="app-tabs"
      activeKey={key}
      onSelect={(k) => setKey(k)}
      fill
    >
      {tabs.map((tab, index) => (
        <Tab eventKey={tab.path} title={tab.name}>
          {tab.name}
        </Tab>
      ))}
    </Tabs>
  );
}
export default TabsRow;